<template>
<el-dialog
    class="search-website"
    title="网站搜索" 
    :visible.sync="show" 
    append-to-body
    top="50px"
    width="650px">
    <div class="container">
        <TypeSelectInputCp
            v-model="type">
        </TypeSelectInputCp>
        <div class="border-radius_1 one">
            <div class="top-container">
                <el-input 
                    v-model="queryParams.name" 
                    placeholder="请输入网站名称搜索" 
                    clearable
                    @keyup.enter.native="getData"
                    @clear='()=>{
                        getData();
                    }'>
                    <i slot="suffix" class="el-input__icon el-icon-loading" v-if="loading"></i>
                </el-input>
                <el-button 
                    size="medium"
                    type="primary"
                    @click="getData">
                    搜索
                </el-button>
            </div>
            <el-table
                class="border-radius_1"
                :data="websiteList"
                border
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="logo"
                    width="56">
                    <template slot-scope="scope">
                        <el-image
                            style="width: 35px; height: 35px;border-radius:0.5rem;"
                            :src="scope.row.icon"
                            fit="cover">
                            <div slot="error">
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称">
                    <template slot-scope="scope">
                        <a :href="scope.row.link" target="_blank">
                            {{scope.row.name}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="操作"
                    width="330px">
                    <template slot-scope="scope">
                        <el-button 
                            size="small" 
                            :loading="loadingOne"
                            @click="addUserWebsiteNoDefined(scope.row.id)">
                            添加
                        </el-button>
                        <el-button 
                            size="small"
                            :loading="loadingTwo"
                            @click="addUserWebsiteIsDefined(scope.row)">
                            添加为自定义
                        </el-button>
                        <el-button 
                            size="small" 
                            @click="copyData(scope.row)">
                            复制为模板
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span style="padding:20px 0;font-size:12px;opacity: 0.8;">
            添加的已收录网站不允许修改，修改及删除权在于管理员。且首页item显示小图标，背景色为该图片的主题色(获取成功的话)。
        </span>
    </div>
</el-dialog>
</template>

<script>
/*
 搜索网站
 */
import {throttleFn} from '@/common/DebounceAndThrottle';
import TypeSelectInputCp from"@/components/public/TypeSelectInput";
export default {
    name:"SearchWebsite",
    components:{TypeSelectInputCp},
    props:{
        websiteType:{
            type:String,
            default:'',
        },
    },
    data() {
        return {
            show:false,
            loading:false,
            loadingOne:false,
            loadingTwo:false,
            type:'',
            queryParams:{
                name:'',
                defined:false,
                page:1,
                size:10,
                count:0,
            },
            websiteList:[],
        };
    },
    computed:{
        websiteTemplate:{  //全部网址模板
            set(newValue){
                this.$store.commit('public/setWebsiteTemplate',newValue);
            },
            get(){
                return this.$store.state.public.websiteTemplate;
            },
        },
    },
    watch:{
        websiteType:{
            handler(){
                this.type = this.websiteType;
            },
            immediate:true,
        },
    },
    methods: {
        setShowState(state){  //控制组件的显示，由外部调用
            this.show = !!state;
        },
        copyData(websiteTemplate){  //网址复制，用于模板
            this.websiteTemplate = websiteTemplate;
            this.$message({
                message:'数据已复制，可以到自定义添加网址处去粘贴。',
                offset:55,
                type:'success',
            });
        },
        getData:throttleFn(function(){  //根据网站名获取网站，7条
            if(this.loading) return;
            this.loading = true;
            this.$Api.getWebsites(
                this.queryParams,
            ).then((data)=>{
                this.websiteList = data.dataList;
            }).finally(()=>{
                this.loading = false;
            });
        },700),
        addUserWebsiteNoDefined:throttleFn(function(websiteId){
            if(this.type.length==0 || this.type.length>30){
                this.$message({
                    message:"所属分类长度1-30",
                    offset:55,
                    type:'error',
                });
                return;
            }
            if (this.loadingOne) return;
            this.loadingOne = true;
            this.$store.dispatch(
                'user/addUserWebsite',
                {
                    websiteId:websiteId,
                    type:this.type,
                },
            ).then(()=>{
                this.$message({
                    message:'添加成功',
                    offset:55,
                    type:'success',
                });
            }).catch((msg) =>{
                this.$message({
                    message:msg,
                    offset:55,
                    type:'error',
                });
            }).finally(()=>{
                this.loadingOne = false;
                this.show = false;
            });
        },700),
        addUserWebsiteIsDefined:throttleFn(function(website){ //添加一个自定义网站
            if(this.type.length==0 || this.type.length>30){
                this.$message({
                    message:"所属分类长度1-30",
                    offset:55,
                    type:'error',
                });
                return;
            }
            if (this.loadingTwo) return;
            this.loadingTwo = true;
            this.$store.dispatch(
                'user/addUserWebsite',
                {
                    name: website.name || '',
                    link: website.link || '',
                    icon: website.icon || '',
                    search:website.search || '',
                    content:website.content || '',
                    type:this.type || '',
                },
            ).then(()=>{
                this.$message({
                    message:'添加成功',
                    offset:55,
                    type:'success',
                });
            }).catch((msg) =>{
                this.$message({
                    message:msg,
                    offset:55,
                    type:'error',
                });
            }).finally(()=>{
                this.loadingTwo = false;
                this.show = false;
            });
        },700),
    }
};
</script>
<style lang="scss" scoped>
.search-website{
    .container{
        width:100%;
        display: flex;
        flex-direction: column;
        height: fit-content;
        .one{
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            box-sizing: border-box;
            background-color: #efefef85;
            >.top-container{
                display: grid;
                grid-template-columns: 1fr 100px;
                grid-gap: 10px
            }
            /deep/.el-table{
                margin-top: 10px;
            }
        }
    }
}
</style>